<template>
    <div>
        <div >
            <div style="width: 100%;">
                <img src="~@/assets/img/index.png" style="width: 100%;height: 13rem;background-position: center center;background-size: cover;" alt="">
            </div>
        </div>

        <van-form @submit="onSubmit">
            <van-field v-model="events" name="活动名" label="活动名" placeholder="活动名"
                :rules="[{ required: true, message: '请填写活动名' }]" />
            <van-field name="prizenum" label="中签数量">
                <template #input>
                    <van-stepper v-model="prizenum" />
                </template>
            </van-field>
            <van-field name="prizehum" label="参与人数">
                <template #input>
                    <van-stepper v-model="prizehum" />
                </template>
            </van-field>

            <div style="margin: 16px;margin-top: 20px;">
                <van-button round block type="info" native-type="submit">创建活动</van-button>
            </div>
        </van-form>
        <van-tabbar route>
            <van-tabbar-item replace to="/main" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item replace to="/my" icon="friends-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
export default {
    data() {
        return {
            events: '',
            prize: '',
            prizenum: '',
            prizehum: "",
            message: '',
            form: {
                usernick: '',
                username: ''
            },
            readonly: false
        };
    },
    created() {
        this.getuser()
    },
    methods: {
        onSubmit(values) {
            console.log(values)
            if (this.readonly == false) {
                this.$dialog.confirm({
                    message: '您还未填写信息，请填写相关信息以后进行抽签！点击确定即可跳转填写信息页。',
                })
                    .then(() => {
                        this.$router.push('/manager')
                    })
                    .catch(() => {
                        // on cancel
                    });
            } else {
                this.$toast.success('创建抽奖活动成功');
                this.$router.push('/MainOk')
            }

        },
        getuser() {
            if (JSON.parse(localStorage.getItem('choujianguser'))) {
                const form = JSON.parse(localStorage.getItem('choujianguser'))
                this.form.usernick = form.usernick
                this.form.username = form.username
                this.readonly = true
            } else {
                this.readonly = false
            }
        },
    },
}
</script>
<style scoped>
.lucky-draw-panel__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f7faff;

    .lucky-draw-panel__title {
        font-size: 42px;
        margin: 24px 0;
    }
}

.van-cell {
    font-size: 16px;
    padding: 15px 15px;
}

.van-field__label {
    color: #333;
}

.head {
    height: 130px;
    width: 100%;
    background-color: #1989fa;
    display: flex;
    align-items: center;
    color: white;
    font-size: 18px;
}

.van-button--normal {
    padding: 0 15px;
    font-size: 16px;
}
</style>
